<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator="/" style="margin-bottom: 20px;">
			<el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item><a href="../main">帮买及废品回收</a></el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 商品状态 -->
		<span>商品状态：</span>
		
		<el-radio-group v-model="radio1" @input="change">
			<el-radio-button :label="1" >全部商品</el-radio-button>
			<el-radio-button :label="2" >上架中</el-radio-button>
			<el-radio-button :label="3" >已下架</el-radio-button>
		</el-radio-group>
		

		<!-- 搜索栏  模糊查询 -->
		<el-form :inline="true" :model="goodsInfo" class="demo-form-inline" style="margin-top: 20px;">
			<el-form-item label="商品名称:">
				<el-input clearable @clear="getGoodsList()" v-model="goodsInfo.goodsName"
					placeholder="请输入商品名称"></el-input>
			</el-form-item>
			<el-form-item label="所属门店:">
				<el-input clearable @clear="getGoodsList()" v-model="goodsInfo.shopName"
					placeholder="请输入所属门店名称"></el-input>
			</el-form-item>
			<el-form-item label="发布日期:">
				<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="subDate" type="daterange"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="seach" style="background-color: khaki; border: none;">搜索</el-button>
			</el-form-item>
		</el-form>


		<!-- 表格信息 -->
		<el-table :data="goodsList" style="width: 100%" :header-cell-style="{backgroundColor: '#f8f8f8'}">
			<el-table-column prop="goodsId" label="商品ID">
			</el-table-column>
			<el-table-column prop="goodsName" label="商品名称">
			</el-table-column>
			<el-table-column prop="goodsShopName" label="所属门店">
			</el-table-column>
			<el-table-column prop="goodsSalesVolume" label="销量">
			</el-table-column>
			<el-table-column prop="goodsPresentPrice" label="预估价">
			</el-table-column>
			<el-table-column label="商品状态">
				<template slot-scope='scope'>
					<el-button disabled type="success" v-if="scope.row.goodsStatus==1">已上架</el-button>
					<el-button disabled type="danger" v-if="scope.row.goodsStatus==0">已下架</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="addTime" label="发布时间">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope='scope'>
					<el-link type="warning" @click="changeStatus(scope.row)"
						v-if="scope.row.goodsStatus==0">上架</el-link>
					<el-link type="warning" @click="changeStatus(scope.row)"
						v-if="scope.row.goodsStatus==1">下架</el-link>
				</template>
			</el-table-column>
		</el-table>

		<!-- 页码 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="goodsInfo.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="goodsInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				//按钮操作
				
				
				//上下架操作
				operation: '上架',
				radio1: 1,
				goodsInfo: {
					pageNum: 1,
					pageSize: 10,
					goodsName: '',
					goodsStatus: '',
					shopName: '',
					startTime: '',
					endTime: ''
				},
				subDate: '',
				total: 1,
				goodsList: []
			}
		},
		methods: {
			//改变上下架状态
			changeStatus(row) {
				if (row.goodsStatus == 1) {
					row.goodsStatus = 0

				} else {
					row.goodsStatus = 1

				}

				this.$http.post('goods/modifyShopGoods', {
						goodsId: row.goodsId,
						goodsStatus:row.goodsStatus
					})
					.then(res => {
						if(res.data.status==200){
							this.$message.success('操作成功!')
						}else{
							this.$message.error('操作失败!')
						}
					})

			},


			//获得制表集合
			getGoodsList() {
				this.$http.get('goods/querySearchShopGoodsList', {
						params: this.goodsInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							this.goodsList = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message.error('服务器接口错误!')
						}
					})
					.catch(error => {
						this.$message.error('服务器接口错误!')
					})
			},

			// 页数改变时调用的函数
			handleCurrentChange(num) {
				this.goodsInfo.pageNum = num
				this.getGoodsList()
			},

			//每页展示条数改变时的函数
			handleSizeChange(size) {
				this.goodsInfo.pageSize = size
				this.goodsInfo.pageNum = 1
				this.getGoodsList()
			},

			// 根据门店名称模糊查询
			// !!!!!根据店铺名称查询有bug
			seach() {
				this.getGoodsList()
			},
			
			change(){
				if(this.radio1==1){
					
					this.$http.get('goods/querySearchShopGoodsList', {
									params: {
										goodsStatus:''
									}
								})
								.then(res => {
									if (res.data.status == 200) {
										this.goodsList = res.data.data.list
										this.total = res.data.data.total
									} else {
										this.$message.error('服务器接口错误!')
									}
								})
								.catch(error => {
									this.$message.error('服务器接口错误!')
								})
						}
				else if(this.radio1==2){
					
					this.$http.get('goods/querySearchShopGoodsList', {
									params: {
										goodsStatus:1
									}
								})
								.then(res => {
									if (res.data.status == 200) {
										this.goodsList = res.data.data.list
										this.total = res.data.data.total
									} else {
										this.$message.error('服务器接口错误!')
									}
								})
								.catch(error => {
									this.$message.error('服务器接口错误!')
								})
						}
				else if(this.radio1==3){
					
					this.$http.get('goods/querySearchShopGoodsList', {
									params: {
										goodsStatus:0
									}
								})
								.then(res => {
									if (res.data.status == 200) {
										this.goodsList = res.data.data.list
										this.total = res.data.data.total
									} else {
										this.$message.error('服务器接口错误!')
									}
								})
								.catch(error => {
									this.$message.error('服务器接口错误!')
								})
				}
			},
			//展示已上架状态货物
			// handleClick(value) {
			// 	console.log(value)
			// 	if(value=='全部货物'){
			// 		this.$http.get('goods/querySearchShopGoodsList', {
			// 				params: {
			// 					goodsStatus:''
			// 				}
			// 			})
			// 			.then(res => {
			// 				if (res.data.status == 200) {
			// 					this.goodsList = res.data.data.list
			// 					this.total = res.data.data.total
			// 				} else {
			// 					this.$message.error('服务器接口错误!')
			// 				}
			// 			})
			// 			.catch(error => {
			// 				this.$message.error('服务器接口错误!')
			// 			})
			// 	}else if(value=='上架中'){
			// 		this.$http.get('goods/querySearchShopGoodsList', {
			// 				params: {
			// 					goodsStatus:1
			// 				}
			// 			})
			// 			.then(res => {
			// 				if (res.data.status == 200) {
			// 					this.goodsList = res.data.data.list
			// 					this.total = res.data.data.total
			// 				} else {
			// 					this.$message.error('服务器接口错误!')
			// 				}
			// 			})
			// 			.catch(error => {
			// 				this.$message.error('服务器接口错误!')
			// 			})
			// 	}else{
			// 		this.$http.get('goods/querySearchShopGoodsList', {
			// 				params: {
			// 					goodsStatus:0
			// 				}
			// 			})
			// 			.then(res => {
			// 				if (res.data.status == 200) {
			// 					this.goodsList = res.data.data.list
			// 					this.total = res.data.data.total
			// 				} else {
			// 					this.$message.error('服务器接口错误!')
			// 				}
			// 			})
			// 			.catch(error => {
			// 				this.$message.error('服务器接口错误!')
			// 			})
			// 	}
			// },

		},
		mounted() {
			this.getGoodsList()
		},

		// 根据时间模糊查询
		watch: {
			subDate() {
				if (this.subDate) {
					this.goodsInfo.startTime = this.subDate[0]
					this.goodsInfo.endTime = this.subDate[1]
				} else {
					this.goodsInfo.startTime = ''
					this.goodsInfo.endTime = ''
				}
			}
		}
	}
</script>

<style>
	.sp {
		font-size: 15px;
		margin-left: 20px;
		color: black;
		margin-bottom: 30px;
		display: inline-block;
	}

	.sp:active {
		color: aqua;
	}
	
	.el-pagination {
		margin-left: 300px;
	}
	
</style>